<template>
	<view class="announcement-detail-container">
		<view class="detail-title">
			{{detailInfo.title}}
		</view>
		<view class="detail-info">
			来源：
			<view class="detail-source">
				{{detailInfo.source}}
			</view>
			<view class="detail-date">
				{{detailInfo.date}}
			</view>
		</view>
		<image class="detail-cover" src="../../../static/store/moments/cover.png" mode="aspectFit"></image>
		<view class="detail-content" v-html="detailInfo.content"> </view>
		<view class="announcement-confirm-wrap">
			<view class="announcement-confirm-btn">
				我已确认
			</view>
		</view>
	</view>
</template>

<script>
	import commonUtils from '@/common/util/common.js'
	export default {
		data() {
			return {
				detailInfo: {
					title: '开学在即！开门福利疾控发布最新提醒',
					source: '官方发布',
					date: '2022-09-01',
					cover: '',
					content: '&nbsp;&nbsp;下周起，开福区各大中小学、幼儿园，都将相继开学丰富多彩的校园生活又要开始了，春季是传染病的多发季节新冠病毒感染疫情常态化防控的同时，其他传染病的预防也不容忽视，春季常见传染疾病，流行性感；流行性感冒简称流感，是流感病毒引起的急性呼吸道感染，也是一种传染性强、传播速度快的疾病。&nbsp;&nbsp;下周起，开福区各大中小学、幼儿园，都将相继开学丰富多彩的校园生活又要开始了，春季是传染病的多发季节<br/>新冠病毒感染疫情常态化防控的同时， 其他传染病的预防也不容忽视， 春季常见传染疾病， 流行性感； 流行性感冒简称流感， 是流感病毒引起的急性编译成功。前端运行日志，请另行在小程序开发工具的控制台查看编译成功。前端运行日志，请另行在小程序开发工具的控制台查看编译成功。前端运行日志，请另行在小程序开发工具的控制台查看',
				}
			}
		},
		onLoad() {
			commonUtils.loadFont();
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.announcement-detail-container {
		font-family: 'PingFangSc';
		font-weight: 400;
		padding: 32upx;

		.detail-title {
			font-size: 44upx;
			font-weight: bold;
		}

		.detail-info {
			display: flex;
			color: #141416;
			font-size: 30upx;
			margin-top: 34upx;

			.detail-source {
				flex: 1;
				color: #1F71AF;
			}

			.detail-date {
				font-weight: bold;
			}
		}

		.detail-cover {
			width: 686upx;
			height: 320upx;
			border-radius: 8upx;
			margin-top: 34upx;
		}

		.detail-content {
			line-height: 54upx;
			margin-top: 32upx;
		}

		.announcement-confirm-wrap {
			width: 100%;
			height: 158upx;
			background: linear-gradient(180.00deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;

			.announcement-confirm-btn {
				width: 560upx;
				height: 88upx;
				background: rgb(7, 111, 255);
				border-radius: 6upx;
				font-size: 30upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


	}
</style>
